<template>
<div class="operationmain">
      <!-- 头部导航 -->
      <div class="operationtitletbs">
        <el-tabs v-model="activename" @tab-click="paneChange">
          <el-tab-pane label="登录日志" name="conLog">
            <!-- 登录日志页 -->
            <div>
              <!-- 搜索栏 -->
              <div>
                <div class="logSearchInput left">
                  <span>搜索日志:</span>
                  <el-input
                    size="small"
                    placeholder="请输入搜索关键词"
                    v-model="logSearchData.keyWord"
                    @keyup.enter.native="logDatasearch"
                    
                  ></el-input>
                  <div class="clear"></div>
                </div>
                <div class="createTimeSearchInput left">
                  <span>创建时间:</span>
                  <el-date-picker
                    @change="logDatasearch"
                    unlink-panels
                    size="small"
                    v-model="logSearchData.createTimeSearch"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </div>
                <div class="left">
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="medium"
                    @click="logDatasearch"
                  >
                    查询
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-refresh-right"
                    size="medium"
                    @click="logDatasearchReset"
                  >
                    重置
                  </el-button>
                </div>
                <div class="clear"></div>
              </div>
              <!-- 表格 -->
              <div>
                <el-table :data="LogtableData" @sort-change="logSortChange">
                  <el-table-column
                    type="index"
                    width="50"
                    label="#"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    sortable="custom"
                    v-for="(item, index) in LogheaderData"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                  ></el-table-column>
                </el-table>
              </div>
              <!-- 分页 -->
              <div class="logPagination right">
                <div class="left numberTip">
                  {{ logPageStart + "-" + logPageEnd }}
                </div>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="logPageNo"
                  :page-sizes="[10, 20, 30]"
                  :page-size="10"
                  layout="total, prev, pager, next,sizes,jumper"
                  :total="logTotal"
                >
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>
          <!-- 操作日志页 -->
          <el-tab-pane label="操作日志" name="operationLog">
            <div>
              <!-- 搜索栏 -->
              <div>
                <div class="logSearchInput left">
                  <span>搜索日志:</span>
                  <el-input
                    size="small"
                    placeholder="请输入搜索关键词"
                    v-model="operationSearchData.keyWord"
                    @keyup.enter.native="operationDatasearch"
                  ></el-input>
                  <div class="clear"></div>
                </div>
                <div class="createTimeSearchInput left">
                  <span>创建时间:</span>
                  <el-date-picker
                    @change="operationDatasearch"
                    unlink-panels
                    size="small"
                    v-model="operationSearchData.createTimeSearch"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </div>
                <div class="logTypeSearchInput left">
                  <span>操作类型:</span>
                  <el-select
                    clearable
                    v-model="operationSearchData.operateType"
                    placeholder="请选择操作类型"
                    size="small"
                    @keyup.enter.native="operationDatasearch"
                  >
                    <el-option
                      v-for="item in opeartionType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="left">
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="medium"
                    @click="operationDatasearch()"
                  >
                    查询
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-refresh-right"
                    size="medium"
                    @click="operationDatasearchReset()"
                  >
                    重置
                  </el-button>
                </div>
                <div class="clear"></div>
              </div>
              <!-- 表格 -->
              <div>
                <el-table
                  :data="operationTableData"
                  @sort-change="operationSortChange"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    label="#"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    sortable="custom"
                    v-for="(item, index) in operationheaderData"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                  ></el-table-column>
                  <el-table-column
                    label="日志类型"
                    prop="logType_dictText"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    label="操作类型"
                    prop="operateType_dictText"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    sortable="custom"
                    label="创建时间"
                    prop="createTime"
                    align="center"
                  ></el-table-column>
                </el-table>
              </div>
              <!-- 分页 -->
              <div class="logPagination right">
                <div class="left numberTip">
                  {{ operationPageStart + "-" + operationPageEnd }}
                </div>
                <el-pagination
                  @size-change="operationhandleSizeChange"
                  @current-change="operationhandleCurrentChange"
                  :current-page="operationPageNo"
                  :page-sizes="[10, 20, 30]"
                  :page-size="10"
                  layout="total, prev, pager, next,sizes,jumper"
                  :total="operationTotal"
                >
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

    <div>

    </div>
    </div>
  </template>
  <script>
  import { LogData, operationApi } from "@/api/api-huang/gateway";
  export default {
    name: "log",
    data() {
      return {
        logSearchData: {
          keyWord: "",
          createTimeSearch: [],
          createTime_begin: "",
          createTime_end: "",
        },
        operationSearchData: {
          keyWord: "",
          createTimeSearch: [],
          operateType: "",
        },
        LogheaderData: [
          {
            label: "日志内容",
            width: "calc(100% - 1225)",
            prop: "logContent",
          },
          {
            label: "操作人ID",
            width: "177",
            prop: "userid",
          },
          {
            label: "操作人名称",
            width: "204",
            prop: "username",
          },
          {
            label: "IP",
            width: "187",
            prop: "ip",
          },
          {
            label: "耗时（毫秒）",
            width: "195",
            prop: "costTime",
          },
          {
            label: "日志类型",
            width: "138",
            prop: "logType_dictText",
          },
          {
            label: "创建时间",
            width: "274",
            prop: "createTime",
          },
        ],
        operationheaderData: [
          {
            label: "日志内容",
            prop: "logContent",
            width: "",
          },
          {
            label: "操作人ID",
            prop: "userid",
            width: "",
          },
          {
            label: "操作人名称",
            prop: "username",
            width: "",
          },
          {
            label: "IP",
            prop: "ip",
            width: "",
          },
          {
            label: "耗时（毫秒）",
            prop: "costTime",
            width: "",
          },
        ],
        opeartionType: [
          {
            label: "查询",
            value: "1",
          },
          {
            label: "添加",
            value: "2",
          },
          {
            label: "修改",
            value: "3",
          },
          {
            label: "删除",
            value: "4",
          },
          {
            label: "导入",
            value: "5",
          },
          {
            label: "导出",
            value: "6",
          },
        ],
        LogtableData: [],
        operationTableData: [],
        operationTotal: 0,
        operationPageSize: 10,
        operationPageNo: 1,
        activename: "conLog",
        operationPageStart: 0,
        operationPageEnd: 0,
        operationColumn: "createTime",
        operationOrder: "desc",
        LogtableData: [],
        logTotal: 0,
        logPageSize: 10,
        logPageNo: 1,
        activename: "conLog",
        logPageStart: 0,
        logPageEnd: 0,
        logColumn: "createTime",
        logOrder: "desc",
      };
    },
    methods: {
      operationDatasearchReset() {
        let _self = this;
        _self.operationSearchData.createTimeSearch = null;
        _self.operationSearchData.createTime_begin = "";
        _self.operationSearchData.createTime_end = "";
        _self.operationSearchData.keyWord = "";
        _self.operationSearchData.operateType = "";
        _self.getOperationData();
      },
      operationDatasearch() {
        let _self = this;
        console.log(_self.operationSearchData);
        if (_self.operationSearchData.createTimeSearch !== null) {
          _self.operationSearchData.createTime_begin =
            _self.operationSearchData.createTimeSearch[0];
          _self.operationSearchData.createTime_end =
            _self.operationSearchData.createTimeSearch[1];
        } else {
          _self.operationSearchData.createTime_begin = "";
          _self.operationSearchData.createTime_end = "";
        }
        _self.getOperationData();
      },
      paneChange(tab, event) {
        let _self = this;
        if (tab.name == "operationLog") {
          _self.getOperationData();
        }
      },
      getOperationData() {
        let _self = this;
        _self.operationTableData = [];
        let data = {
          PageSize: _self.operationPageSize,
          PageNo: _self.operationPageNo,
          order: _self.operationOrder,
          column: _self.operationColumn,
          keyWord: _self.operationSearchData.keyWord,
          createTime_begin: _self.operationSearchData.createTime_begin,
          createTime_end: _self.operationSearchData.createTime_end,
          operateType: _self.operationSearchData.operateType,
          logType: 2,
        };
        operationApi(data).then((res) => {
          console.log(res);
          if (res.code == 0) {
            let records = res.result.records;
            _self.operationTotal = res.result.total;
            if (
              _self.operationPageNo ==
              Math.ceil(_self.operationTotal / _self.operationPageSize)
            ) {
              (_self.operationPageStart =
                (_self.operationPageNo - 1) * _self.operationPageSize + 1),
                (_self.operationPageEnd = _self.operationTotal);
            } else {
              (_self.operationPageStart =
                (_self.operationPageNo - 1) * _self.operationPageSize + 1),
                (_self.operationPageEnd =
                  _self.operationPageSize * _self.operationPageNo);
            }
            for (let item of records) {
              _self.operationTableData.push({
                logContent: item.logContent,
                userid: item.userid,
                username: item.username,
                ip: item.ip,
                costTime: item.costTime,
                logType_dictText: item.logType_dictTextitem,
                createTime: item.createTime,
                operateType_dictText: item.operateType_dictText,
                logType_dictText: item.logType_dictText,
              });
            }
          }
        });
      },
      operationSortChange(column) {
        let _self = this;
        _self.operationColumn = column.prop;
        if (column.prop) {
          if (column.order == "ascending") {
            _self.operationOrder = "asc";
          } else if (column.order == "descending") {
            _self.operationOrder = "desc";
          }
        }
        _self.getOperationData();
      },
      operationhandleSizeChange(val) {
        let _self = this;
        _self.operationPageSize = val;
        _self.getOperationData();
      },
      operationhandleCurrentChange(val) {
        let _self = this;
        _self.operationPageNo = val;
        _self.getOperationData();
      },
      // 登录日志
      logDatasearchReset() {
        let _self = this;
        _self.logSearchData.keyWord = "";
        _self.logSearchData.createTimeSearch = null;
        _self.logSearchData.createTime_begin = "";
        _self.logSearchData.createTime_end = "";
        _self.getLogData();
      },
      logDatasearch() {
        let _self = this;
        console.log(_self.logSearchData);
        if (_self.logSearchData.createTimeSearch !== null) {
          _self.logSearchData.createTime_begin =
            _self.logSearchData.createTimeSearch[0];
          _self.logSearchData.createTime_end =
            _self.logSearchData.createTimeSearch[1];
        } else {
          _self.logSearchData.createTime_begin = "";
          _self.logSearchData.createTime_end = "";
        }
        _self.getLogData();
      },
      logSortChange(column) {
        let _self = this;
        _self.logColumn = column.prop;
        console.log(_self.logColumn);
        if (column.prop) {
          if (column.order == "ascending") {
            _self.logOrder = "asc";
          } else if (column.order == "descending") {
            _self.logOrder = "desc";
          }
        }
  
        _self.getLogData();
      },
      getLogData() {
        let _self = this;
        _self.LogtableData = [];
        let data = {
          logPageSize: _self.logPageSize,
          logPageNo: _self.logPageNo,
          order: _self.logOrder,
          column: _self.logColumn,
          keyWord: _self.logSearchData.keyWord,
          createTime_begin: _self.logSearchData.createTime_begin,
          createTime_end: _self.logSearchData.createTime_end,
          logType: 1,
        };
        LogData(data).then((res) => {
          console.log(res);
          if (res.code == 0) {
            let records = res.result.records;
            _self.logTotal = res.result.total;
            if (
              _self.logPageNo == Math.ceil(_self.logTotal / _self.logPageSize)
            ) {
              (_self.logPageStart =
                (_self.logPageNo - 1) * _self.logPageSize + 1),
                (_self.logPageEnd = _self.logTotal);
            } else {
              (_self.logPageStart =
                (_self.logPageNo - 1) * _self.logPageSize + 1),
                (_self.logPageEnd = _self.logPageSize * _self.logPageNo);
            }
            for (let item of records) {
              _self.LogtableData.push({
                logContent: item.logContent,
                userid: item.userid,
                username: item.username,
                ip: item.ip,
                costTime: item.costTime,
                logType_dictText: item.logType_dictTextitem,
                createTime: item.createTime,
              });
            }
          }
        });
      },
      handleSizeChange(val) {
        let _self = this;
        _self.logPageSize = val;
        _self.getLogData();
      },
      handleCurrentChange(val) {
        let _self = this;
        _self.logPageNo = val;
        _self.getLogData();
      },
    },
    mounted() {
      let _self = this;
      _self.getLogData();
    },
  };
  </script>
  <style>
  .numberTip {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
  }
  .logPagination .el-pagination {
    display: inline-block;
  }
  .right {
    float: right;
  }
  .logTypeSearchInput {
    width: 25%;
  }
  .logTypeSearchInput .el-select {
    width: calc(100% - 60px);
    padding: 4px 11px;
  }
  .createTimeSearchInput .el-date-editor {
    padding: 5px 8px;
    width: calc(100% - 60px);
  }
  .createTimeSearchInput {
    padding: 4px 11px;
    width: 26%;
  }
  .logSearchInput .el-input {
    width: calc(100% - 60px);
    padding: 4px 11px;
  }
  .createTimeSearchInput {
    width: 30%;
  }
  .logSearchInput .el-input {
    width: calc(100% - 60px);
    padding: 4px 11px;
  }
  
  .logSearchInput {
    width: 25%;
  }
  .left {
    float: left;
  }
  .operationmain {
    margin-top: 10px;
    padding: 24px;
    box-sizing: border-box;
    background-color: white;
  }
  #tab-operationLog {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 400;
  }
  #tab-conLog {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 400;
  }
  </style>